/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-01-12 09:35:49
 * @LastEditTime : 2023-07-14 15:15:08
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\CameraVideo.jsx
 * @Description  :
 */
import './Scss/CameraVideo.scss'
import { Pagination, Drawer, Button, Form } from 'antd'
import { useBoolean, useRequest, useSetState, useLocalStorageState } from 'ahooks'
import { useEffect, useState, memo } from 'react'
import { Http } from '../../../Api'
import { BuiltInData, commonTableList } from '../Common/common'
import { filteredObj } from '../../../Configure/Common'
import { Video } from '../../../Configure/Video'
// import { FormItem } from '../../../Form/Form'
import { ModalBox } from '../../../Modal/ModalBox'
import { ProjectList } from '../Common/Conversion'

const defaultData = {
    pageIndex: 1,
    pageSize: 6,
    projectUuid: '',
    organizationUuid: '',
    cameraTypeUuid: '',
    cameraPositionUuid: '',
    cameraGroupCode: '',
    tableName: '',
    deviceSerial: '',
    ptz: '',
    isEnabled: '',
    online: '',
    oSortId: 'asc@1',
    isList: '1',
}

const VideoWindow = memo(({ data }) => <Video data={data} name={1} />)
const VideoBox = memo(({ data }) => {
    const [IsEnabled, setIsEnabled] = useState(data.isEnabled)
    const [ModalData, setModalData] = useState()

    const { runAsync } = useRequest(Http, { manual: true })
    const Open = () => {
        runAsync({ url: 'putCamera', data: { ...data, isEnabled: 1 }, path: [data.uuid] }).then(() => setIsEnabled(1))
    }
    const Off = () => {
        runAsync({ url: 'putCamera', data: { ...data, isEnabled: 0 }, path: [data.uuid] }).then(() => setIsEnabled(0))
    }

    return (
        <div className="VideoBox">
            <VideoWindow data={data} />
            <div className="VideoBtm">
                <div className="Text">
                    <div>
                        <div>摄像头品牌 : </div>
                        <div>{BuiltInData.camerafactory[data.cameraFactory]}摄像头</div>
                    </div>
                    <div>
                        <div>摄像头云台 : </div>
                        <div>{BuiltInData.CameraPTZ[data.ptz]}</div>
                    </div>
                    <div>
                        <div>摄像头状态 : </div>
                        <div>{BuiltInData.IsEnabled[IsEnabled]}</div>
                    </div>
                </div>

                <div className="Options">
                    <div>操作</div>
                    <div>
                        {data.cameraFactory === 1 && (
                            <Button
                                type="primary"
                                ghost
                                onClick={() =>
                                    setModalData({
                                        type: 'PanPlaybackVideo',
                                        data: { ...data, title: '回放画面', width: 1000 },
                                    })
                                }
                            >
                                回放
                            </Button>
                        )}
                        {IsEnabled === 0 ? (
                            <Button type="primary" ghost onClick={Open}>
                                启用
                            </Button>
                        ) : (
                            <Button type="primary" danger ghost onClick={Off}>
                                禁用
                            </Button>
                        )}
                        {data.ptz === 1 && (
                            <Button
                                type="primary"
                                ghost
                                onClick={() =>
                                    setModalData({
                                        type: 'PanTiltControl',
                                        data: { ...data, title: '云台控制', width: 1450 },
                                    })
                                }
                            >
                                云台
                            </Button>
                        )}
                        {data.talk === 1 && (
                            <Button
                                type="primary"
                                ghost
                                onClick={() => {
                                    const options = 'width=800,height=600,status=yes,toolbar=no,resizable=no'
                                    const str = Object.keys(data)
                                        .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
                                        .join('&')
                                    const url = `https://ys.ljkjkf.com?${str}`
                                    window.open(url, 'example', options)
                                }}
                            >
                                语音
                            </Button>
                        )}
                    </div>
                </div>
            </div>
            <ModalBox OptionsCall={ModalData} />
        </div>
    )
})

export const CameraVideo = () => {
    const { hostname } = window.location
    const [form] = Form.useForm()
    const [PageData, setPageData] = useState()
    const [Cache] = useLocalStorageState('ClientData')
    const [DrawerStatus, { setTrue, setFalse }] = useBoolean(false)
    // const [DrawerStatus, setDrawerStatus] = useState(false)
    const [Params, setParams] = useSetState(defaultData)
    const [Data, setData] = useState()

    const { runAsync: getCamera } = useRequest(Http, {
        manual: true,
        onSuccess: res => setData(res),
    })
    const { runAsync: getCameraPositionTree } = useRequest(Http, {
        manual: true,
        onSuccess: async res => {
            setPageData([
                {
                    ...commonTableList.projectUuid,
                    valueEnum: await ProjectList(),
                    hideInAdded: true,
                    hideInModify: true,
                    hideInTable: true,
                    hideInSearch: !hostname.includes('jszx'),
                },
                { ...commonTableList.organizationUuid, rules: false, valueEnum: Cache.organization },
                {
                    dataIndex: 'cameraPositionUuid',
                    title: '摄像头位置',
                    valueType: 'treeSelect',
                    fieldProps: {
                        options: res,
                        fieldNames: { label: 'tableName', value: 'uuid' },
                    },
                    width: 150,
                },
                {
                    dataIndex: 'cameraTypeUuid',
                    title: '摄像头类别',
                    valueType: 'select',
                    valueEnum: Cache.cameraType,
                    width: 150,
                },
                {
                    dataIndex: 'online',
                    title: '在线状态',
                    valueType: 'select',
                    valueEnum: BuiltInData.online,
                    width: 100,
                },
                { ...commonTableList.isEnabled },
                { ...commonTableList.tableName, title: '摄像头名称', rules: false },
                {
                    dataIndex: 'deviceSerial',
                    title: '设备序列号',
                    valueType: 'input',
                },
                {
                    dataIndex: 'ptz',
                    title: '云台状态',
                    valueType: 'select',
                    valueEnum: BuiltInData.CameraPTZ,
                },
            ])
        },
    })

    const onReset = () => {
        form.resetFields()
        setParams(defaultData)
        setFalse()
    }

    useEffect(() => {
        getCamera({ url: 'getCamera', data: filteredObj(Params) })
    }, [getCamera, Params])
    useEffect(() => {
        getCameraPositionTree({ url: 'getCameraPositionTree' })
    }, [getCameraPositionTree])

    return (
        <div className="CameraVideo">
            <div className="DiyBoxTitle">
                <div className="left">
                    <div>监控管理</div>
                    <div>摄像头云台</div>
                </div>
                <div className="right">
                    <Button type="primary" onClick={setTrue}>
                        搜索条件
                    </Button>
                    <Button onClick={onReset}> 重置 </Button>
                </div>
            </div>
            <div className="CameraVideoBox">
                <div className="cameraList">
                    {Data && Data.list.map(item => <VideoBox key={item.uuid} data={item} />)}
                </div>
                <div className="pagination">
                    <Pagination
                        total={Data?.total}
                        showTotal={total => `共${total}条记录 -- 当前第${Params.pageIndex}页`}
                        showSizeChanger={false}
                        pageSize={Params.pageSize}
                        current={Params.pageIndex}
                        onChange={e => setParams({ pageIndex: e })}
                    />
                </div>
            </div>
            <Drawer
                className="ModalBox"
                title="摄像头云台筛选条件"
                placement="right"
                width={500}
                onClose={setFalse}
                open={DrawerStatus}
            >
                <div className="CameraVideoDrawer">
                    <Form
                        form={form}
                        name="basic"
                        initialValues={{ pageSize: '6' }}
                        onFinish={e => {
                            setParams({ ...e, pageIndex: 1 })
                            setFalse()
                        }}
                    >
                        {/* <FormItem form={form} PageData={PageData} /> */}
                        <div className="Options">
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                            <Button htmlType="button" onClick={onReset}>
                                重置
                            </Button>
                        </div>
                    </Form>
                </div>
            </Drawer>
        </div>
    )
}
